<template>
  <view class="app-container">
    <!-- 顶部导航栏 -->
    <view class="el-header" style="background-color: #409EFF; color: white; text-align: center; line-height: 60px;">
      {{ currentTime }}
    </view>
 
    <!-- 主要内容区域 -->
    <scroll-view class="main-content" scroll-y>
      <view class="search-bar">
        <!-- 使用 grid-fill 图标，颜色改为黑色 -->
        <u-icon name="search" size="20" color="#333"></u-icon>
        <input
          placeholder="搜索视频/课件/商品/专栏"
          style="margin-left: 10px; flex: 1;"
        />
      </view>
      
      <!-- 轮播图 -->
      <swiper class="swiper" :autoplay="true" :interval="3000" :duration="500">
        <swiper-item v-for="(item, index) in 5" :key="index">
          <image
            src="/static/1.png"
            mode="aspectFill"
            style="width: 100%; height: 100%;"
          />
        </swiper-item>
      </swiper>
      
      <view style="padding: 10px;">
        <!-- 活动卡片 -->
        <view class="activity-card">
          <!-- 使用 grid-fill 图标颜色改为黑色 -->
          <u-icon name="volume" size="20" color="#333"></u-icon>
          <text style="font-weight: bold; flex: 1; text-align: center; color: white; margin: 0 10px;">新活动</text>
          <u-icon name="list-dot" size="20" color="#333"></u-icon>
        </view>
        
        <!-- 推荐课程 -->
        <view class="recommend-section" style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
          <text style="font-weight: bold;">推荐课程</text>
          <!-- 使用 grid-fill 图标颜色改为黑色 -->
          <u-icon name="arrow-right-double" size="20" color="#333"></u-icon>
        </view>
        <view class="recommendation-container">
          <view class="recommendation-list">
            <image
              v-for="(item, index) in 3"
              :key="index"
              src="/static/1.png"
              mode="widthFix"
              class="recommendation-item"
            />
          </view>
        </view>
        
        <!-- 推荐商品 -->
        <view class="recommend-section" style="margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center;">
          <text style="font-weight: bold;">推荐商品</text>
          <!-- 使用 grid-fill 图标颜色改为黑色 -->
          <u-icon name="arrow-right-double" size="20" color="#333"></u-icon>
        </view>
        <view class="recommendation-container">
          <view class="recommendation-list">
            <image
              v-for="(item, index) in 3"
              :key="index"
              src="/static/1.png"
              mode="widthFix"
              class="recommendation-item"
            />
          </view>
        </view>
      </view> <!-- 补全闭合标签 -->
      
      <!-- 悬浮按钮 -->
      <view class="float-button">
        <!-- 使用 grid-fill 图标颜色改为白色（因为背景是红色） -->
        <u-icon name="server-man" size="30" color="#fff"></u-icon>
      </view>
    </scroll-view>
	<tabBar></tabBar>
  </view>
</template>

<script>
export default {
  name: 'HomePage',
  data() {
    return {
      currentTime: ''
    };
  },
  created() {
    this.updateCurrentTime();
    setInterval(this.updateCurrentTime, 1000); // 每秒更新一次时间
  },
  methods: {
    updateCurrentTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      this.currentTime = `${hours}:${minutes}`;
    }
  }
};
</script>

<style>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.main-content {
  flex: 1;
  overflow-y: auto;
}

.el-header {
  background-color: #409EFF;
  color: white;
  text-align: center;
  line-height: 60px;
  height: 60px;
}

.search-bar {
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  margin: 10px;
  border-radius: 5px;
}

.swiper {
  height: 200px;
  margin: 10px;
}

.activity-card {
  background-color: #409EFF;
  border-radius: 4px;
  padding: 10px;
  margin: 10px 10px 20px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recommend-section {
  margin: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recommendation-container {
  position: relative;
  padding: 10px;
}

.recommendation-list {
  display: flex;
  justify-content: space-between; /* 确保图片间距一致 */
}

.recommendation-item {
  width: 30%; /* 三张图片，每张占 30% 宽度 */
  height: auto;
}

.float-button {
  position: fixed;
  bottom: 100px;
  right: 20px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #FF0000;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  z-index: 999;
}
</style>